<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <el-card shadow="hover">
          <template #header>
            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
              </el-col>
              <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
            </el-row>
          </template>

          <el-table v-loading="loading" border :data="listData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <template v-for="(item, index) in columns">
              <el-table-column v-if="item.visible"
                               :key="item.key"
                               :label="item.label"
                               align="center"
                               :prop="item.key" >
                <template v-slot="scope">
                  <template v-if="item.key === '文档'">
                    <el-button type="primary" link>{{ scope.row[item.key] }}</el-button>
                  </template>
                  <template v-if="item.key === '启用状态'">
                    <el-tag type="success">{{ scope.row[item.key] }}</el-tag>
                  </template>
                </template>
              </el-table-column>
            </template>

            <el-table-column label="操作" fixed="right" width="180" align="center">
              <template #default="scope">
                  <el-button link type="primary" icon="Edit">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 方法
import { ref } from 'vue'
// 列显隐信息
const columns = ref([
  { key: '标准/依据', label: `标准/依据`, visible: true, children: [] },
  { key: '启用状态', label: `启用状态`, visible: true, children: [] },
  { key: '编号', label: `编号`, visible: true, children: [] },
  { key: '文本', label: `文本`, visible: true, children: [] },
  { key: '文档', label: `文档`, visible: true, children: [] },
]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const total = ref(0)
const showSearch = ref(true);
const loading = ref(true);
const listData = ref([
  {
    "编号": "GB3838-2021",
    "文本": "地表水环境质量标准",
    "标准/依据": "生态环境部发布，规定地表水1-Ⅴ类水质指标及限值，适用于江河、湖泊、水库等地表水环境质量评价",
    "启用状态": "现行",
    "文档": "GB3838-2021 地表水环境质量标准.pdf"
  },
  {
    "编号": "GB5749-2022",
    "文本": "生活饮用水卫生标准",
    "标准/依据": "国家卫生健康委员会发布，规定生活饮用水106项指标及卫生要求，适用于集中式供水及分散式供水",
    "启用状态": "现行",
    "文档": "GB5749-2022 生活饮用水卫生标准.docx"
  },
  {
    "编号": "HJ/T91.1-2019",
    "文本": "地表水和污水监测技术规范 第1部分：地表水",
    "标准/依据": "生态环境部发布，规定地表水采样点位布设、采样频率、样品保存及监测方法等技术要求",
    "启用状态": "现行",
    "文档": "HJ/T91.1-2019 地表水监测技术规范.pdf"
  },
  {
    "编号": "HJ493-2009",
    "文本": "水质 样品的保存和管理技术规定",
    "标准/依据": "原环境保护部发布，规范水质样品采集后的保存方法、容器要求及管理流程",
    "启用状态": "现行",
    "文档": "HJ493-2009 水质样品保存技术规定.xlsx"
  },
  {
    "编号": "GB/T6920-1986",
    "文本": "水质 pH值的测定 玻璃电极法",
    "标准/依据": "国家质量监督检验检疫总局发布，规定用玻璃电极法测定水质pH值的操作步骤及注意事项",
    "启用状态": "现行",
    "文档": "GB/T6920-1986 pH值测定方法.pdf"
  },
  {
    "编号": "HJ505-2009",
    "文本": "水质 五日生化需氧量(BOD5)的测定 稀释与接种法",
    "标准/依据": "原环境保护部发布，适用于测定BOD5大于或等于2mg/L的水样，是地表水和污水监测的常用方法",
    "启用状态": "现行",
    "文档": "HJ505-2009 BOD5测定方法.docx"
  },
  {
    "编号": "GB11914-1989",
    "文本": "水质 化学需氧量的测定 重铬酸盐法",
    "标准/依据": "国家质量监督检验检疫总局发布，用于测定水中化学需氧量(COD)，适用于地表水、生活污水和工业废水",
    "启用状态": "现行",
    "文档": "GB11914-1989 COD测定方法.pdf"
  },
  {
    "编号": "HJ535-2009",
    "文本": "水质 氨氮的测定 纳氏试剂分光光度法",
    "标准/依据": "原环境保护部发布，通过纳氏试剂与氨氮反应生成黄棕色络合物，用分光光度法测定氨氮含量",
    "启用状态": "现行",
    "文档": "HJ535-2009 氨氮测定方法.xlsx"
  },
  {
    "编号": "GB11893-1989",
    "文本": "水质 总磷的测定 钼酸铵分光光度法",
    "标准/依据": "国家质量监督检验检疫总局发布，适用于地表水、污水和工业废水中总磷的测定，检测范围0.01-0.6mg/L",
    "启用状态": "现行",
    "文档": "GB11893-1989 总磷测定方法.pdf"
  },
  {
    "编号": "HJ694-2014",
    "文本": "水质 汞、砷、硒、铋和锑的测定 原子荧光法",
    "标准/依据": "生态环境部发布，利用原子荧光光谱技术测定水中重金属元素含量，适用于地表水和地下水",
    "启用状态": "现行",
    "文档": "HJ694-2014 重金属原子荧光法.docx"
  },
  {
    "编号": "GB/T11901-1989",
    "文本": "水质 悬浮物的测定 重量法",
    "标准/依据": "国家质量监督检验检疫总局发布，通过过滤、干燥、称重测定水中悬浮物含量，为基础物理指标检测方法",
    "启用状态": "现行",
    "文档": "GB/T11901-1989 悬浮物测定方法.pdf"
  },
  {
    "编号": "HJ828-2017",
    "文本": "水质 化学需氧量的测定 重铬酸盐法（替代GB11914-1989部分内容）",
    "标准/依据": "生态环境部发布，优化重铬酸盐法测定COD的流程，扩大检测范围至0.2-700mg/L",
    "启用状态": "现行",
    "文档": "HJ828-2017 COD测定方法更新版.pdf"
  },
  {
    "编号": "GB/T5750.4-2006",
    "文本": "生活饮用水标准检验方法 感官性状和物理指标",
    "标准/依据": "国家卫生健康委员会发布，包含色度、浑浊度、臭和味等15项物理指标的检测方法",
    "启用状态": "现行",
    "文档": "GB/T5750.4-2006 物理指标检验方法.xlsx"
  },
  {
    "编号": "HJ/T372-2007",
    "文本": "水质自动采样器技术要求及检测方法",
    "标准/依据": "原环境保护部发布，规定水质自动采样器的技术性能、技术指标及检测方法",
    "启用状态": "现行",
    "文档": "HJ/T372-2007 自动采样器技术规范.pdf"
  },
  {
    "编号": "GB/T14848-2017",
    "文本": "地下水质量标准",
    "标准/依据": "国家质量监督检验检疫总局发布，将地下水质量划分为5类，规定各指标限值及评价方法",
    "启用状态": "现行",
    "文档": "GB/T14848-2017 地下水质量标准.docx"
  }
]);


// 获取数据
const getList = () => {
  loading.value = false
}

// 搜索
const handleQuery = () => {
}

// 重置
const resetQuery = () => {
  for (let i in queryParams.value) {
    if (i !== 'pageNum' && i !== 'pageSize') {
      queryParams.value[i] = undefined
    }
  }
  handleQuery()
}

// 多选
const handleSelectionChange = () => {
}

// 新增
const handleAdd = () => {
}


getList()
</script>
